<template>
  <div>
    <Layout :headerFixed="true">
      <HHeader theme="dark">
        <div class="layout-logo"></div>
        <!-- 个人中心  退出登录 -->
        <user-info/>
      </HHeader>
      <Layout>
        <Sider>
          <Menu :datas="menuData" @select="changeRoute" />
        </Sider>
        <Content style="padding: 0px 50px;">
          <router-view />
        </Content>
      </Layout>
      <HFooter class="text-center">
        Copyright © 2019
        <a>Lan</a>
      </HFooter>
    </Layout>
  </div>
</template>

<script>
import UsersMenu from "./users/menu";
import MonitorMenu from "./monitor/menu";
import DocumentsMenu from "./documents/menu";
import UserInfo from "./users/UserInfo";
export default {
  // 注册自定义组件，每个组件相当于就是一个自定义元素
  components: {
    // 等同于：UserInfo: UserInfo
    // 元素名称可以是UserInfo，也可以是user-info
    UserInfo
  },
  data() {
    return {
      menuData: [...UsersMenu, ...MonitorMenu, ...DocumentsMenu]
    };
  },
  methods: {
    changeRoute(menu) {
      let key = menu.key;
      if (key.startsWith("/") && this.$route.path !== key) {
        // 如果当前路由跟key相同，那么就不要再push，因为push的目标更当前路由相同，会报错。
        this.$router.push(key);
      }
    }
  }
};
</script>